<template>
  <div class="statistics-container">
    <NavBar left-arrow @click-left="handleBack">
      <template #title>
        <van-tabs v-model:active="activeTab" animated swipeable>
          <van-tab title="关注" name="follow"></van-tab>
          <van-tab title="粉丝" name="fans"></van-tab>
        </van-tabs>
      </template>
      <template #right>
        <van-icon name="setting-o" :size="20" @click="handleSetting" />
      </template>
    </NavBar>

    <div class="content-wrap">
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import FollowList from './components/FollowList.vue'
import FansList from './components/FansList.vue'

const router = useRouter()
const route = useRoute()
const activeTab = ref(route.query.type || 'follow')

const currentComponent = computed(() => {
  return activeTab.value === 'follow' ? FollowList : FansList
})

// 监听标签页变化
watch(activeTab, (newVal) => {
  router.replace({
    path: `/user/statistics/${route.params.id}`,
    query: {
      type: newVal,
    },
  })
})
const handleBack = () => {
  router.back()
}
const handleSetting = () => {
  // router.push('/profile/setting')
}
</script>

<style scoped>
.statistics-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
}
:deep(.van-nav-bar) {
  background: var(--bg-color-light);
}
/* 标签页样式 */
:deep(.van-tabs) {
  width: 160px;
  margin: 0 auto;
}

:deep(.van-tabs__wrap) {
  height: var(--header-height);
}

:deep(.van-tabs__nav) {
  background: transparent;
}

:deep(.van-tab) {
  padding: 0 var(--spacing-lg);
  color: var(--font-color-gray);
}

:deep(.van-tab--active) {
  color: var(--font-color-base);
  font-weight: var(--tab-font-weight);
}
.content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>
